<template>
    <div>
        <el-input
            v-if="show || inputVisible"
            ref="InputRef"
            v-model="inputValue"
            class="tag-input"
            size="small"
            @keyup.enter="handleInputConfirm"
            @blur="handleInputConfirm"
        />
       <template v-else>
            <template v-if="isCustomTag">
                <div  @click="showInput">
                    <slot name="tag"></slot>
                </div>
            </template>
            <template  v-else>
                <el-button style="color: #606266;"  size="small" @click="showInput">
                    + {{ label || '新建标签'}}
                </el-button>
            </template>
       </template>
      
    </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
const props = defineProps<{
    isCustomTag: boolean,
    label?: string,
    show?: boolean
}>()
const emit = defineEmits(['input'])
const inputVisible = ref<boolean>(false)
const inputValue = ref<string>('')

const handleInputConfirm =() => {
  inputVisible.value = false
  if (inputValue.value) {
    emit('input', inputValue.value)
  }
  inputValue.value = ''
}

const showInput = () => {
    inputValue.value  = ''
    inputVisible.value = true
}
</script>
<style scoped lang="css">
</style>